<template>
  <div id="map" class="map">
    <div class="draw-map" v-if="drawBool">
      <a-tooltip placement="topLeft" title="按多边形绘制">
        <img src="~@/assets/icon/u34362.svg" style="height:40px;" alt="多边形" @click="drawPolygon">
      </a-tooltip>
      <a-tooltip placement="topLeft" title="按圆形绘制">
        <img src="~@/assets/icon/u34363.svg" style="height:40px;" alt="圆形" @click="drawCircle">
      </a-tooltip>
      <!-- <a-tooltip placement="topLeft" title="清除框选区域">
        <a-icon type="close-square" style="font-size: 40px;color: #969090;" alt="清除" @click="clearLayer" />
      </a-tooltip> -->
    </div>
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content" class="popup-content"></div>
    </div>
  </div>
</template>

<script>
import mapMarker from './mapMarker'
export default {
  mixins: [mapMarker],
  props: {
    drawBool: {
      type: Boolean,
      default: false
    },
    value:{
      type: Array,
      default() {
       return []
      }
    }
  },
  data() {
    return {
      overlays: [],
      // chartStyleOptions: {
      //   strokeColor: '#1890FF', // 边线颜色。
      //   fillColor: '#1890FF', // 填充颜色。当参数为空时，圆形将没有填充效果。
      //   strokeWeight: 2, // 边线的宽度，以像素为单位。
      //   strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
      //   fillOpacity: 0.3, // 填充的透明度，取值范围0 - 1。
      //   strokeStyle: 'solid' // 边线的样式，solid或dashed
      // }
    }
  },
  computed: {
    getValue() {
      let value = this.value ? this.value : []
      return value
    },
  },
  watch: {
    getValue: {
      // immediate: true,
      deep: true,
      handler(val) {
        if(!this.map || this.coordinateList.length>0) return
        // 删除存在的区域
        this.map.removeLayer(this.vectorLayer);
        //渲染区域
        this.map.addLayer(this.drawPolygonEdit(val));
      }
    }
  },
  methods: {
    onEdit(obj) {
      // let point = []
      // let chartObjet = null
      // let chartVOList = obj.chartVOList

      // for (let i = 0, len = chartVOList.length; i < len; i++) {
      //   point.push(new BMap.Point(chartVOList[i].longtitude, chartVOList[i].latitude))
      // }

      // if (chartVOList.length > 1) {
      //   // 多边形
      //   chartObjet = new BMap.Polygon(point, this.chartStyleOptions)
      // } else {
      //   // 圆形
      //   chartObjet = new BMap.Circle(point[0], chartVOList[0].radius, this.chartStyleOptions)
      // }
      // this.overlays = [chartObjet]
      // this.map.addOverlay(chartObjet)
      // this.map.panTo(point[0])
      // 删除存在的区域
      // this.map2.removeLayer(this.vectorLayer);
      // //渲染区域
      // console.log(arr);
      // this.map2.addLayer(that.drawPolygonEdit(arr));
    },
    clearAll() {
      for (var i = 0; i < this.overlays.length; i++) {
        this.map.removeOverlay(this.overlays[i])
      }
      this.overlays.length = 0
    },
    removeOverlay() {
      if (this.map != null) {
        this.map.clearOverlays()
      }
    }
  }
}
</script>
<style lang="less" scoped>
/*隐藏ol的一些自带元素*/
:deep(.ol-attribution),
:deep(.ol-rotate),
:deep(.ol-zoom) {
  display: none;
}
.map {
  position: relative;
  .draw-map {
    position: absolute;
    z-index: 1;
    left: 5px;
    top: 5px;
    padding: 8px 10px;
    background-color: #fff;
    display: flex;
    >* {
      margin-right: 10px;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
